<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <todo-header :addTodo="addTodo"></todo-header>
        <todo-list :todos="todos" :delTodo="delTodo"></todo-list>
        <todo-footer :todos="todos" :clearAllComplete="clearAllComplete"></todo-footer>
      </div>
    </div>
  </div>
</template>

<script>
import TodoFooter from "./components/TodoFooter";
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";

export default {
  name: "App",
  components: {
    TodoFooter,
    TodoHeader,
    TodoList
  },
  data() {
    return {
      todos: [{'title': '吃饭', 'complete': true}, {'title': '睡觉', 'complete': false}, {'title': '编码', 'complete': true},]
    }
  },
  methods:{
    addTodo(todo){
       this.todos.unshift(todo);
    },
    delTodo(index){
       this.todos.splice(index,1);
    },
    clearAllComplete(){
     this.todos=this.todos.filter(todo=>todo.complete==false);
    }
  }
}
</script>

<style scoped>

</style>
